<template>
  <div class="myLeft">
    <div class="sideNav sideNavHeader">
      <div class="sideNavFirst">财富管理</div>
    </div>
    <div class="sideNav" v-for="item in List" :key="item.proName">
      <div class="sideNavFirst" @click="menuItemClick(item)">
        <img
          v-if="item.active"
          class="sideNavIcon"
          src="@/assets/ico04.gif"
          alt=""
        />
        <img
          v-if="!item.active"
          class="sideNavIcon"
          src="@/assets/s_icon06.gif"
          alt=""
        />
        <span class="sideNavFirstSpan">{{ item.proName | menuFtr }}</span>
      </div>
      <div :class="[item.active ? 'sideNavSubActive' : 'sideNavSub']">
        <div
          v-for="it in item.children"
          :key="it.proName"
          @click="menuItemClick(item, it)"
          :class="[
            it.active
              ? 'sideNavFirst sideNavFirstItem sideNavFirstItemActive'
              : 'sideNavFirst sideNavFirstItem'
          ]"
        >
          <span class="sideNavFirstItemTxt">{{ it.proName | menuFtr }}</span>
          <img
            v-show="it.active"
            class="sideNavIcon"
            src="@/assets/s_icon06.gif"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TheHeader",
  props: {
    msg: {
      type: Object,
      default() {
        return {
          proNameV1: "01",
          proNameV2: "v1"
        };
      }
    }
  },
  data() {
    return {
      List: []
    };
  },
  filters: {
    menuFtr: function(value) {
      let proTypeList = [
        {
          id: "01",
          name: "结构性存款"
        },
        {
          id: "02",
          name: "惠享"
        },
        {
          id: "03",
          name: "私享"
        },
        {
          id: "04",
          name: "养老无忧"
        },
        {
          id: "05",
          name: "金鑫"
        },
        {
          id: "06",
          name: "惠财"
        },
        {
          id: "07",
          name: "点滴成金"
        }
      ];
      let newValue = "";
      proTypeList.forEach(item => {
        if (item.id == value) {
          console.log(value, proTypeList, item.name);
          newValue = item.name;
        }
      });
      if (newValue) {
        return newValue;
      } else {
        return value;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getMenu();
    });
  },
  methods: {
    // 发送交易获取菜单信息
    getMenu() {
      this.$remote(
        "/runtime/pocfinancial/listPocFinancialTree.action",
        {}
      ).then(data => {
        this.List = data;
        this.List.forEach(item => {
          if (item.proName == this.msg.proNameV1) {
            item.active = true;
            if (item.children) {
              item.children.forEach(it => {
                if (it.proName == this.msg.proNameV2) {
                  it.active = true;
                }
              });
            }
          }
        });
      });
    },
    menuItemClick(item, it) {
      console.log(item);
      let active = item.active;
      this.childActive(this.List, false);
      if (!it && active) {
        item.active = false;
        console.log(item);
      } else if (!it) {
        item.active = true;
        // if (item.children) {
        //   item.children[0].active = true;
        // }
      } else {
        item.active = true;
      }
      if (it) {
        it.active = true;
      }
      this.$forceUpdate();
      this.$emit("menuItemClick", item);
    },
    childActive(item, active) {
      item.forEach(it => {
        it.active = active;
        if (it.children) {
          this.childActive(it.children, active);
        }
      });
    }
  }
};
</script>

<style scoped>
.myLeft {
  width: 200px;
  font-size: 12px;
}
.sideNav {
  text-align: left;
  background-color: #e3f0fd;
}
.sideNavFirst {
  display: flex;
  align-items: center;
  height: 50px;
}
.sideNavFirstItem {
  height: 40px;
  justify-content: space-between;
  border-left: transparent solid 4px;
}
.sideNavFirstItem:hover {
  /*border-left: #0080cc solid 4px;*/
  background-color: #ffffff;
  color: #0080cc;
}
.sideNavFirstItemActive {
  border-left: #0080cc solid 4px;
  background-color: #ffffff;
  color: #0080cc;
}
.sideNavFirstItemTxt {
  margin-left: 42px;
  cursor: pointer;
}
.sideNavIcon {
  margin: 0px 20px;
}
.sideNavHeader {
  background: linear-gradient(to bottom right, #0080cc, #005599);
  /* background-color: #005599; */
}
.sideNavHeader .sideNavFirst {
  color: #ffffff;
  margin-left: 20px;
  background-color: transparent;
  font-size: 16px;
}
.sideNavFirstSpan {
  font-weight: bold;
  cursor: pointer;
}
.sideNavSub {
  display: none;
}
.sideNavSubActive {
}
.sideNavFirst:hover + .sideNavSub {
  display: block;
}
.sideNavSub:hover {
  display: block;
}
</style>
